/**
 * 中奖列表
 */
import Tool from '../components/tool';
import React from "react";
export default class Win extends React.Component {
    constructor(...props) {
        super(...props);
        this.state = {
            boxHeight: document.documentElement.clientHeight,
            list: [],
            hasNext: true
        };
    }

    loadData(max = 0, size = 30) {
        this.ajax && this.ajax.abort();
        this.ajax = $.get('/api/prize/wins', {max, size}, (data)=> {
            this.state.list = this.state.list.concat(data);
            this.setState({list: this.state.list, hasNext: data.length >= size});
            setTimeout(()=>this.scroller.refresh(), 0);
        }, 'json');
    }

    componentDidMount() {
        this.loadData();
        this.initScroll();
        Tool.setPageTitle('中奖名单');
    }

    componentWillUnmount() {
        this.scroller && this.scroller.destroy();
    }

    initScroll() {
        this.scroller = new IScroll('#wrapper', {
            mouseWheel: true,
            scrollbars: true,
            tap: 'itemTapped'
        });

        let self = this;
        let max = 0;
        this.scroller.on('scrollEnd', function () {
            if (self.state.list.length > 0) {
                max = self.state.list[self.state.list.length - 1].createdAt;
            }
            if (this.y === this.maxScrollY && self.state.hasNext) {
                self.loadData(max);
            }
        });
    }

    render() {
        const data = this.state.list.map((item, index)=> {
            return (
                <li key={index}>
                    <span>{item.title}</span>
                    <span>{item.nickname}</span>
                    <span>{item.phone}</span>
                    <span>{item.isExchange?'已领奖':'未领奖'}</span>
                </li>
            )
        });
        return (
            <div className="pages site-win" style={{height:this.state.boxHeight}}>
                <div className="content">
                    <h2 className="sub-title">摇一摇活动已领奖名称</h2>
                    <h1 className="title">排行版</h1>
                    <div className="list" id="wrapper">
                        <ul>
                            <li className="header">
                                <span>奖品</span>
                                <span>昵称</span>
                                <span>手机</span>
                                <span>状态</span>
                            </li>
                            {data}
                        </ul>
                    </div>
                </div>
            </div>
        )
    }
}